<template>
	<view class="container-box">
		<!-- 搜索框 -->
		<view class="search-box" :class="{'QZBG':GDHEAD}" :style="GDHEAD ? 'padding-right: ' + MPPR + 'px' : ''">
			<!-- <view class="navbar" ></view> -->
			<view class="ctn">
				<view class="hx-search-box">
					<image class="search-icon" src="/static/supermarket/index/icon-search.png" mode="aspectFit"></image>
					<input type="text" value="" focus placeholder="请输入搜索关键词搜索店铺" cursor-spacing="5" confirm-type="search" @confirm="doSearch" @keydown.enter="doSearch"  />
				</view>
			</view>
		</view>
		<store-list ref="storeList"></store-list>
	</view>
</template>

<script>
	import storeList from '@/pages/Component/supermarket/component/store/list.vue'
	import Vue from 'vue'
	var app = getApp();
	export default {
		components: {
			storeList
		},
		data() {
			return {
				
			}
		},
		onLoad(){
			
		},
		onShareAppMessage() {
			return {
				title: app.globalData.share_info.share_title,
				path: '/pages/Component/supermarket/Program/search/search',
				imageUrl: app.globalData.share_info.share_img,
			}
		},
		methods: {
			// 搜索
			doSearch(e) {
				this.$refs.storeList.getStoreList(0,e.detail.value)
			},
		}
	}
</script>

<style lang="scss">
	.container-box{
		.search-box {
			position: sticky;
			top: 0;
			z-index: 2;
		
			.ctn {
				border-top-left-radius: 50upx;
				border-top-right-radius: 50upx;
				background: #f8f8f8;
				padding: 15px 15px 12px;
		
				.hx-search-box {
					border-radius: 40px;
					padding: 0 15px;
					height: 34px;
					display: flex;
					align-items: center;
					line-height: 44rpx;
					background-color: #eeeeee;
					flex: 1;
					color: #888888;
					font-size: 14px;
		
					.search-icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 16rpx;
					}
					
					input {
						width: 100%;
						color: #000;
					}
				}
			}
		}
	}
</style>
